<template>
  <table border="1" cellpadding="8" cellspacing="0">
    <thead>
    <tr>
      <th v-for="(header, index) in headers" :key="index">
        {{ header }}
      </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(row,rowIndex) in tableData" :key="rowIndex">
      <td v-for="(name, colIndex) in row" :key="colIndex">{{ name }}</td>
    </tr>
    </tbody>
  </table>
</template>

<script setup>
import {defineProps, computed} from 'vue';

const props = defineProps({
  jsonData: {
    type: Object,
    required: true
  }
});

const headers = computed(() => {
  // 拿到对象的key
  const jsonData = JSON.parse(props.jsonData);
  const headers = Object.keys(jsonData[0])
  return headers;
});


const tableData = computed(() => {
  const jsonData = JSON.parse(props.jsonData);

  return jsonData;
});



</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: center;
}
</style>
